const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');

// 设置Canvas大小为窗口大小
function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// 粒子类
class Particle {
	constructor(effect) {
		this.effect = effect;
		this.radius = Math.random() * 5 + 1;
		this.x = this.radius + Math.random() * (this.effect.width - this.radius * 2);
		this.y = this.radius + Math.random() * (this.effect.height - this.radius * 2);
		this.vx = Math.random() * 1 - 0.5;
		this.vy = Math.random() * 1 - 0.5;
		this.pushX = 0;
		this.pushY = 0;
		this.friction = 0.95;
		this.alpha = 1;
		this.color = "#4cc9f0";
	}

	getRandomColor() {
		const colors = [
			'#4cc9f0', '#4895ef', '#4361ee',
			'#3f37c9', '#3a0ca3', '#480ca8',
			'#560bad', '#7209b7', '#b5179e',
			'#f72585'
		];
		return colors[Math.floor(Math.random() * colors.length)];
	}

	draw(context) {
		context.beginPath();
		context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
		context.fillStyle = this.color;
		context.globalAlpha = this.alpha;
		context.fill();
		context.closePath();
	}

	update() {
		// 根据当前效果类型更新粒子
		if (this.effect.type === 'stars') {
			this.updateStars();
		} else if (this.effect.type === 'bubbles') {
			this.updateBubbles();
		} else if (this.effect.type === 'connections') {
			this.updateConnections();
		} else if (this.effect.type === 'mouse') {
			this.updateMouse();
		}

		// 边界检查
		if (this.x < this.radius) {
			this.x = this.radius;
			this.vx *= -1;
		} else if (this.x > this.effect.width - this.radius) {
			this.x = this.effect.width - this.radius;
			this.vx *= -1;
		}

		if (this.y < this.radius) {
			this.y = this.radius;
			this.vy *= -1;
		} else if (this.y > this.effect.height - this.radius) {
			this.y = this.effect.height - this.radius;
			this.vy *= -1;
		}

		this.x += (this.vx + this.pushX);
		this.y += (this.vy + this.pushY);

		this.pushX *= this.friction;
		this.pushY *= this.friction;
	}

	updateStars() {
		// 星空效果：粒子缓慢移动，随机闪烁
		if (Math.random() < 0.005) {
			this.alpha = Math.random() * 0.5 + 0.5;
		}
	}

	updateBubbles() {
		// 气泡效果：粒子向上移动，逐渐消失
		this.vy = -Math.random() * 0.5 - 0.2;
		this.vx = Math.random() * 0.4 - 0.2;

		// 逐渐减小透明度
		this.alpha -= 0.005;

		// 如果粒子消失，重新生成一个
		if (this.alpha <= 0) {
			this.reset();
		}
	}

	reset() {
		this.x = Math.random() * this.effect.width;
		this.y = this.effect.height + this.radius;
		this.alpha = 1;
		this.color = this.getRandomColor();
	}

	updateConnections() {
		// 连接点效果：粒子之间连接
		for (let i = 0; i < this.effect.particles.length; i++) {
			const dx = this.x - this.effect.particles[i].x;
			const dy = this.y - this.effect.particles[i].y;
			const distance = Math.sqrt(dx * dx + dy * dy);

			if (distance < 100) {
				ctx.beginPath();
				ctx.strokeStyle = this.color;
				ctx.globalAlpha = 0.2 * (1 - distance / 100);
				ctx.lineWidth = 0.5;
				ctx.moveTo(this.x, this.y);
				ctx.lineTo(this.effect.particles[i].x, this.effect.particles[i].y);
				ctx.stroke();
				ctx.closePath();
			}
		}
	}

	updateMouse() {
		// 鼠标跟随效果
		const dx = this.x - this.effect.mouse.x;
		const dy = this.y - this.effect.mouse.y;
		const distance = Math.sqrt(dx * dx + dy * dy);
		const forceDirectionX = dx / distance;
		const forceDirectionY = dy / distance;

		if (distance < this.effect.mouse.radius) {
			const force = (this.effect.mouse.radius - distance) / this.effect.mouse.radius;
			this.pushX += forceDirectionX * force * this.effect.mouse.power;
			this.pushY += forceDirectionY * force * this.effect.mouse.power;

			// 绘制连接线
			if (distance < 150) {
				ctx.beginPath();
				ctx.strokeStyle = this.color;
				ctx.globalAlpha = 0.1 * (1 - distance / 150);
				ctx.lineWidth = 0.8;
				ctx.moveTo(this.x, this.y);
				ctx.lineTo(this.effect.mouse.x, this.effect.mouse.y);
				ctx.stroke();
				ctx.closePath();
			}
		}
	}
}

// 粒子效果类
class ParticleEffect {
	constructor(canvas) {
		this.canvas = canvas;
		this.width = canvas.width;
		this.height = canvas.height;
		this.particles = [];
		this.numberOfParticles = 150;
		this.type = 'stars'; // 默认效果
		this.mouse = {
			x: 0,
			y: 0,
			radius: 150,
			power: 5
		};

		// 初始化粒子
		this.createParticles();

		// 鼠标事件监听
		this.canvas.addEventListener('mousemove', e => {
			this.mouse.x = e.x;
			this.mouse.y = e.y;
		});

		this.canvas.addEventListener('mouseleave', () => {
			this.mouse.x = 0;
			this.mouse.y = 0;
		});
	}

	createParticles() {
		for (let i = 0; i < this.numberOfParticles; i++) {
			this.particles.push(new Particle(this));
		}
	}

	handleParticles(context) {
		// 连接粒子
		this.connectParticles(context);

		// 更新和绘制粒子
		this.particles.forEach(particle => {
			particle.update();
			particle.draw(context);
		});
	}

	connectParticles(context) {
		// 气泡效果不需要连接
		if (this.type === 'bubbles') return;

		// 连接点效果已经在粒子内部处理
		if (this.type === 'connections') return;

		// 星空效果下的连接
		if (this.type === 'stars') {
			for (let a = 0; a < this.particles.length; a++) {
				for (let b = a; b < this.particles.length; b++) {
					const dx = this.particles[a].x - this.particles[b].x;
					const dy = this.particles[a].y - this.particles[b].y;
					const distance = Math.sqrt(dx * dx + dy * dy);

					if (distance < 100) {
						context.save();
						context.beginPath();
						context.strokeStyle = 'rgba(0, 0, 0, 0.3)';
						context.lineWidth = 0.2;
						context.moveTo(this.particles[a].x, this.particles[a].y);
						context.lineTo(this.particles[b].x, this.particles[b].y);
						context.stroke();
						context.closePath();
						context.restore();
					}
				}
			}
		}
	}

	changeEffect(type) {
		this.type = type;

		// 重置所有粒子
		this.particles.forEach(particle => {
			particle.x = particle.radius + Math.random() * (this.width - particle.radius * 2);
			particle.y = particle.radius + Math.random() * (this.height - particle.radius * 2);
			particle.vx = Math.random() * 1 - 0.5;
			particle.vy = Math.random() * 1 - 0.5;
			particle.alpha = 1;
			particle.color = particle.getRandomColor();
		});
	}
}

// 初始化粒子效果
const effect = new ParticleEffect(canvas);

// 动画循环
function animate() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// 绘制背景渐变
	const gradient = ctx.createRadialGradient(
		canvas.width / 2, canvas.height / 2, 0,
		canvas.width / 2, canvas.height / 2, canvas.width
	);
	gradient.addColorStop(0, 'rgba(0, 0, 0, 0.3)');
	gradient.addColorStop(1, '#0d0d0d');

	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	effect.handleParticles(ctx);
	requestAnimationFrame(animate);
}

animate();

// 按钮事件监听
document.getElementById('starsBtn').addEventListener('click', () => {
	effect.changeEffect('stars');
	setActiveButton('starsBtn');
});

document.getElementById('bubblesBtn').addEventListener('click', () => {
	effect.changeEffect('bubbles');
	setActiveButton('bubblesBtn');
});

document.getElementById('connectionsBtn').addEventListener('click', () => {
	effect.changeEffect('connections');
	setActiveButton('connectionsBtn');
});

document.getElementById('mouseBtn').addEventListener('click', () => {
	effect.changeEffect('mouse');
	setActiveButton('mouseBtn');
});

function setActiveButton(activeId) {
	// 移除所有按钮的active类
	document.querySelectorAll('.controls button').forEach(btn => {
		btn.classList.remove('active');
	});

	// 为当前按钮添加active类
	document.getElementById(activeId).classList.add('active');
}
